<template>
  <div id="asideHotArticle" class="aside-box sidebar">
    <h3 class="aside-title">{{ title }}</h3>
    <div class="item-rank"></div>
    <div class="aside-content">
      <ul class="hotArticle-list">
        <li v-for="(item, index) in list" :key="item.id">
          <span class="substr" @click="$router.push({name:'notice-detail', query:{id: item.id}})">
            <span v-if="index < 3">【最新发布】{{ item.noticeTitle }}</span>
            <span v-else>{{ item.noticeTitle }}</span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotSearchSide",
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data(){
    return {

    }
  }
}
</script>

<style scoped lang="less">
ol, ul, li {
  list-style: none;
}
#asideHotArticle{
  h3.aside-title {
    background-color: white;
    color: #3d3d3d;
    padding: 0 16px;
    height: 38px;
    line-height: 38px;
    position: relative;
    font-size: 14px;
    font-weight: bold;
  }

  .item-rank {
    height: 1px;
    background-color: #f5f6f7;
    width: 268px;
    margin: auto;
  }

  div.aside-content {
    padding: 12px 16px 16px 16px;
    overflow: hidden;

    *{
      word-wrap: break-word;
    }

    .hotArticle-list {
      margin-top: -8px;

      li {
        margin-top: 8px;
        display: flex;
        width: 100%;
        max-width: 100%;
        align-items: center;
        margin-bottom: 12px;

        .num {
          display: block;
          flex: 0 0 16px;
          height: 16px;
          line-height: 16px;
          text-align: center;
          font-size: 14px;
          margin-right: 8px;
          border-radius: 2px;
        }
        .substr {
          display: block;
          flex: 1;
          color: #222226;
          cursor: pointer;
          vertical-align: sub;
          white-space: nowrap;
          overflow: hidden;
        }

        .icon-hot-fire {
          flex: 0 0 16px;
          height: 16px;
          background: url() no-repeat;
          background-size: 16px;
        }
      }

      li:first-child .num{
        color: #fe2d46;
      }

      li:nth-child(2) .num {
        color: #f60;
      }

      li:nth-child(3) .num {
        color: #faa90e;
      }
    }
  }
}

.aside-box{
  margin-bottom: 8px;
  background-color: #fff;
  border-radius: 2px;
}
</style>
